
<!--overflow: hidden  超出隐藏-->
<template>
  <div id="my-element" style="height: 100vh;overflow: hidden;display: flex;justify-content: center;align-items: center; background-color:#fafafa">
    <div style="display: flex;background-color: white;opacity:0.94;width: 800px;height: 450px;border-radius: 10px;border: 1px solid #ccc; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);">

      <div style="flex : 30%;padding: 85px; padding-top: 100px;opacity:0.9;">
        <img src="@/assets/boyun.png" alt="" style="width: 300px;height: 250px;">
      </div>
      <!-- : model 用于传递父组件中的数据到子组件，而 v- model 则用于实现双向绑定，将数据在父子组件之间进行同步。
      在 Vue.js 中，v-bind 用于绑定 HTML 元素的属性，例如 class、style、src 等等。v-bind 的语法比较繁琐，需要写成 v-bind:class、v-bind:style、v-bind:src 等等。
      Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。-->

      <div style="flex : 60%; height: 390px;align-items: center;">
        <el-form :model="userForm" style="width: 80%;padding-top : 43px;"  :rules="rules" ref="loginRef">
          <!--                    。通过给 el-form 添加 ref 属性，你可以在 Vue 组件中通过引用来访问和操作这个表单组件，而不需要通过 DOM 查询或其他方式。-->
          <!--                    使用 ref 属性可以在 Vue 组件的 JavaScript 部分直接访问,从而可以进行一系列操作，如表单验证、重置、获取表单数据等。
                                 font-weight: bold;加粗-->
          <div data-v-26084dc2="" style="font-size: 40px; color: rgb(41, 184, 253); font-weight: bold; text-align: center;padding-top: 0px; margin-bottom: 50px;">博云</div>
          <el-form-item prop="phone">
                        <el-input prefix-icon="el-icon-user" size="big" placeholder="请输入手机号" v-model="userForm.phone"></el-input>
                    </el-form-item>

                    <el-form-item  prop="code" >
                        <div style="display: flex">
                            <el-input prefix-icon="el-icon-check"size="medium" placeholder="请输入验证码" style="flex:1" v-model="userForm.captcha"></el-input>
                            <div style="flex:1">
                              <el-button type="danger"  :disabled="isSend" plain style="width:100%" @click="getCaptcha">{{ isSend ? '获取验证码...' : '获取验证码' }}</el-button>
                            </div>
                        </div>
                    </el-form-item>

            <el-form-item>
              <el-button type="primary"  :disabled="isSubmitting" plain font-size="30px" style="width:100%" @click="login">{{ isSubmitting ? '登录中...' : '登录' }}</el-button>
            </el-form-item>

<!--                    cursor CSS 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。-->
                    <div style="display: flex;">
                        <div style="flex: 1;color: grey;font-size: 15px">还未注册？<span style="font-size: 15px;color:#ed6967;cursor: pointer" @click="$router.push('/news')">注册</span> </div>
                        <div style="flex: 1;text-align: right">
                            <span style="color:#ed6967; cursor: pointer"  @click="handForgetPassword">忘记密码</span>
                        </div>
                    </div>
                </el-form>
            </div>
        </div>
        <el-dialog title="忘记密码" :visible.sync="forgetPassDialogVis" width="30%">
            <el-form :model="forgetUserform" label-width="80px" style="padding-right: 20px">
                <el-form-item label="邮箱">
                    <el-input v-model="forgetUserform.phone" autocomplete="off" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="forgetUserform.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="forgetPassDialogVis = false">取 消</el-button>
                <el-button type="primary" @click="resetPassword">确 定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>


    import ValidCode from "@/components/ValidCode.vue";

    export default {
        name: "LoginByPhone",
      components: {ValidCode},
        data(){
            //验证码表单校验 value为表单里面输入的code
            const validateCode = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入验证码'))
                } else if (value.toLowerCase()!= this.code) {
                    callback(new Error('验证码错误'))
                }else {
                    callback();//反馈
                }
            }
            return{
                isSubmitting: false,
                isSend: false,
                forgetPassDialogVis:false,//不可见
                userForm:{
                     //code:'',//表单里用户输入的code 验证码
                    phone:'',
                    captcha:'',
                },
                forgetUserform:{},
                // trigger: "blur": 失去焦点时触发
                rules: {
                  phone: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                    ],
                  captcha: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                    ]
                }
            }
        },methods:{
            handForgetPassword(){//初始化表单
                this.forgetUserform={}
                this.forgetPassDialogVis=true
            },
            resetPassword(){
                this.$request.put('/password',this.forgetUserform).then(res=>{
                    if (res.code==='200'){
                        this.$message.success("重置成功")
                        this.forgetPassDialogVis=false
                    }else{
                        this.$message.error("用户名不存在")
                    }
                })
            },
            getCode(code){
                this.code=code.toLowerCase()
            },
            login(){
              if (this.isSubmitting) return;
              this.isSubmitting = true;
              try {
                // 登录逻辑
                this.$refs["loginRef"].validate((valid) => {
                  if (valid) {
                    this.$request.post('users/login',this.userForm).then(res=>{
                      if (res.code==="200"){
                        this.$router.push('/')
                        this.$message.success('登录成功')
                        this.$router.push('/')
                        localStorage.setItem("honey-user",JSON.stringify(res.data)) //存储用户数据
                      }else {
                        this.$message.error("账号密码错误，请重新输入")
                      }
                    });
                  }
                })
              } finally {
                this.isSubmitting = false;
              }
            },

        getCaptcha(){
          if (this.isSend) return;
          this.isSend = true;
          try {
            // 登录逻辑
            if (this.userForm.phone  && this.userForm.phone !== null){
              this.$request.get('users/getCaptcha',{
                  params:{
                    phone:this.userForm.phone
                }
              }).then(res=>{
                if (res.code==="200"){
                  this.$message.success('发送验证码成功！')
                }else {
                  this.$message.error("手机号错误，请重新输入")
                }
              });
            }else {
              this.$message.error("请输入手机号")
            }
          } finally {
            this.isSend = false;
          }
        }
        }
    }
</script>

